<template>
    <!-- <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
    </van-swipe> -->
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image.url" class="shangpin" />
        </van-swipe-item>
    </van-swipe>

</template>
<style>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
}
.shangpin {
    width: 100%;
    height: 100%;
}
</style>
<script setup>
import { reactive, ref } from 'vue';
    
    const images = reactive([
        {url:'/images/banner1.jpg'},
        {url:'/images/banner2.jpg'},
    ])
</script>